<template>
  <div class="category">
    <nav-bar class="category-nav">
      <div slot="center">分类</div>
    </nav-bar>
    <div class="content">
      <tab-menu :categories="categories"
                @selectItem="selectItem" />
      <scroll class="tab-content" ref="scroll">
        <tab-content :categoriesProduct="categoriesProduct" />
        <tab-control :titles="['综合','新品','销量']"
                     @tabClick="tabClick" />
        <tab-content-detail :categoryDetail="showCategoryDetail" />
      </scroll>
    </div>
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";
import Scroll from "components/common/scroll/Scroll";
import TabControl from 'components/content/tabControl/TabControl'

import TabMenu from "./childComps/TabMenu";
import TabContent from "./childComps/TabContent";
import TabContentDetail from "./childComps/TabContentDetail";

import {
  getCategory,
  getSubcategory,
  getCategoryDetail,
} from "network/category";

import { POP, NEW, SELL } from "common/constants";
import { itemListenerMixin, tabControlMixin } from "common/mixin";

export default {
  name: "Category",
  components: {
    NavBar,
    Scroll,
    TabControl,
    TabMenu,
    TabContent,
    TabContentDetail,
  },
  data() {
    return {
      categories: [],
      categoriesProduct: [],
      categoryDetail: [],
      categoryData: {},
      currentIndex: 0,
      categoryType: null,
      flag: [],
    };
  },
  mixins: [itemListenerMixin, tabControlMixin],
  computed: {
    showSubcategory() {
      return this.categoryData[this.categories[this.currentIndex].title]
        .subcategories.list;
    },
    showCategoryDetail() {
      if (this.categoryDetail[this.currentType] instanceof Array) {
        return this.categoryDetail[this.currentType];
      }
      return [];
    },
  },
  created() {
    this.getCategory();
  },
  methods: {
    getCategory() {
      getCategory().then((res) => {
        //1.获取分组数据
        this.categories = res.data.category.list;

        //2.初始化每个类别的子数据
        // for (let [index, item] of this.categories.entries()){}
        for (let [index, item] of this.categories.entries()) {
          this.categoryData[item.title] = {
            subcategories: {},
            categoryDetail: {
              pop: [],
              new: [],
              sell: [],
            },
          };
          this.flag[index] = false;
        }
        //3.请求一个分类的数据
        this.geySubcategory(0);
        this.flag[0] = true;
      });
    },
    geySubcategory(index) {
      // categoryType 指的是 最近流行 这些标题，一共是 16 条数据
      this.categoryType = this.categories[index].title;

      // maitKey 指的是根据这个 maitKey 请求每一个 categories 对应的数据
      const maitKey = this.categories[index].maitKey;
      getSubcategory(maitKey).then((res) => {
        // 拿到所有的 sub 数据，一共是 28 条
        this.categoriesProduct = res.data.list;

        // subcategories 指的是根据 maitKey 请求到的每一个分类对应的数据
        this.categoryData[this.categoryType].subcategories = res.data;

        this.categoryData = { ...this.categoryData };

        //请求分类里tabControl数据
        this.getCategoryDetail(POP);
        this.getCategoryDetail(NEW);
        this.getCategoryDetail(SELL);
      });
    },
    getCategoryDetail(type) {
      // 获取请求的 miniWallkey
      const miniWallkey = this.categories[this.currentIndex].miniWallkey;

      getCategoryDetail(miniWallkey, type).then((res) => {
        // 将获取的数据存入 categoryData
        this.categoryData[this.categoryType].categoryDetail[type] = res;

        this.categoryData = { ...this.categoryData };
      });
    },
    selectItem(index) {
      this.currentIndex = index;
      this.categoryType = this.categories[index].title;

      if (!this.flag[index]) {
        this.geySubcategory(index);
      } else {
        this.categoriesProduct = this.showSubcategory;
      }
    },
  },
  deactivated() {
    this.$bus.$off("itemImgLoad", this.itemImgListener);
  },
  watch: {
    categoryType(newValue) {
      this.categoryDetail = this.categoryData[newValue].categoryDetail;
    },
  },
};
</script>

<style scoped>
.category {
  height: 100vh;
}
.category-nav {
  background-color: var(--color-tint);
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}
.content {
  overflow: hidden;
  position: absolute;
  top: 44px;
  bottom: 49px;
  left: 0;
  right: 0;

  display: flex;
}
.tab-content {
  height: 100%;
  flex: 1;
}
</style>
